<template>
  <view class="interests">
    <view class="relative py-3 text-base flex justify-center items-center">
      <text>选择兴趣</text>
      <view class="absolute right-4" @click="close">
        <wd-icon color="#999" name="close" size="32rpx"></wd-icon>
      </view>
    </view>
    <wd-divider></wd-divider>
    <view class="p-4">
      <wd-checkbox-group v-model="state.value">
        <wd-checkbox :model-value="item" v-for="(item, index) in state.list" :key="index">
          {{ item }}
        </wd-checkbox>
      </wd-checkbox-group>

      <view class="mt-2">
        <wd-input clearable v-model="state.other" placeholder="输入其他兴趣点" />
      </view>
    </view>
    <view class="w-4/5 mx-auto mt-2">
      <wd-button :round="false" :block="true" custom-class="w-full" @click="handleConfirm">
        确定
      </wd-button>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const state = ref({
  list: [
    '个人职业发展规划',
    '商业思维与商业洞察能力提升',
    '商业汇报能力提升',
    '团队领导力提升',
    '顶层战略设计与业务策略制定能力提升',
    '商业实战案例学习',
    '基础商业知识学习与应用',
  ],
  value: [],
  other: '',
})

const emit = defineEmits(['close', 'confirm', 'update:modelValue'])

function close() {
  emit('close')
}

function handleConfirm() {
  const { value, other } = state.value
  if (value.length || other) {
    const v = [...value]
    if (other) {
      v.push(...other.split(','))
    }

    emit('update:modelValue', v.join())
  } else {
    emit('update:modelValue', '')
  }
  close()
}

watch(
  () => props.modelValue,
  () => {
    const selList = props.modelValue.split(',')
    state.value.value = state.value.list.filter((item) => selList.includes(item))
    state.value.other = selList.filter((item) => !state.value.value.includes(item)).join()
    console.log('kkk', state.value)
  },
  {
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
.interests {
  --wot-divider-margin: 0;
}
</style>
